<template>
	<view class="content">
		<view class="course" v-for="(item ,index) in list" :key="index">
			<view class="time">
				退课时间:{{item.time}}
			</view>
			<view class="courseItem">
				<view :class="index!=-1?'course_left':'course_left overCourse'">
			
				
				<u-time-line>
					<u-time-line-item class="" nodeTop="8">
						<template v-slot:content>
							<view style="height: 40upx;position: relative;bottom: 10upx;">
								<view class="startTime">{{item.time_s}}</view>
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item nodeTop="18">
						<template v-slot:content>
							<view style="height: 20upx;">
								<view class="overTime">{{item.time_s_en}}</view>
								<!-- 		<view class="over" v-if="item!=1">
									<text>已结束</text>
								</view> -->
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		
			<view :class="index!=-1?'course_right':'course_right overCourse'">
				<view class="title">
					<view class="">
						{{item.title}}
					</view>
					<view class="">
						{{item.user}}
					</view>
				</view>
				<view class="address">
					<u-icon name="map-fill" color="#a7a7a7" size="30"></u-icon>
					{{item.add}}
				</view>
		
			</view>

			</view>
			
		</view>
		<u-empty v-if="!list.length" text="暂无退课信息" mode="list" margin-top="200"></u-empty>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			}
		},
		onLoad() {
			this.newData()
		},
		methods: {
			newData(){
				this.$myRuquest('home/user/translate').then(res=>{
					if(res.code==400){
						this.list=res.data
						this.list.forEach(item=>{
							item.time =this.$u.timeFormat(item.time, 'yyyy-mm-dd');
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.content{
		background-color: rgb(247,247,247);
		padding: 20upx;
		min-height: 100vh;
	}
	.course {
		
		width: calc(100% -20upx);
		margin: 20upx 0;
		padding: 30upx 30upx 20upx 30upx;
		position: relative;
		background-color: #fff;
		border-radius: 12upx;
		.courseItem{
			display: flex;
			.silk-ribbon1 {
				position: absolute;
				top: -6upx;
				right: 100upx;
				color: #fff;
			}
			
			.silk-ribbon1:after {
				position: absolute;
				content: "";
				display: block;
				width: 0;
				height: 0;
				border-left: 38upx solid transparent;
				border-right: 38upx solid transparent;
				border-top: 10upx solid #ff7802;
			}
			
			.silk-ribbon1 span {
				position: relative;
				display: inline-block;
				text-align: center;
				background: #ff7802;
				font-size: 24upx;
				line-height: 2;
				padding: 12upx 8upx 10upx;
				border-top-right-radius: 8upx;
				width: 60upx;
			}
			
			.silk-ribbon1 span:before,
			.silk-ribbon1 span:after {
				position: absolute;
				content: "";
				display: block;
			}
			
			.silk-ribbon1 span:before {
				background: #ff7802;
				height: 6upx;
				width: 6upx;
				left: -6upx;
				top: 0;
			}
			
			.silk-ribbon1 span:after {
				background: #be5601;
				height: 6upx;
				width: 8upx;
				border-radius: 8upx 8upx 0 0;
				left: -8upx;
				top: 0;
			}
			.silk-ribbon2:after {
				border-top: 10upx solid #007aff;
			}
			.silk-ribbon2 span:before ,.silk-ribbon2 span{
				background: #007aff;
			}
			.silk-ribbon2 span:after{
				background-color: #0053ad;
			}
				.course_left {
					margin-right: 20upx;
					flex: 1;
					// margin-bottom: 50upx;
			
			
					.over {
						text {
							border: 2upx solid #c1c1c1;
							color: #c1c1c1;
							padding: 0 8upx;
							border-radius: 6upx;
							font-size: 20upx;
						}
					}
			
					.startTime,
					.overTime {
						font-size: 36upx;
						font-weight: 900;
			
						text {
							color: #ccc;
							font-size: 20upx;
							margin-right: 10upx;
							position: relative;
							bottom: 8upx;
						}
					}
				}
			
				.course_right {
					flex: 4;
					position: relative;
					bottom: 6upx;
			
					.title {
						// padding-top: 10upx;
						width: 400upx;
						font-weight: 900;
			
						view:nth-child(1) {
							color: #000;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
			
						view:nth-child(2) {
							font-size: 22upx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							color: #003c7c;
							margin: 5upx 0;
						}
					}
			
					.address {
						color: #888888;
						width: 500upx;
						font-size: 26upx;
						position: absolute;
						bottom: 0upx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			
			
				.rest {
					background-color: red;
					color: #fff;
					border-radius: 10upx;
					// width: 100upx;
					// height: 50upx;
					// line-height: 50upx;
					padding: 10upx 20upx;
					font-weight: 900;
					text-align: center;
					position: absolute;
					bottom: 10upx;
					right: 20upx;
				}
		}
		.time{
			font-size: 24upx;
			color: #b2b2b2;
			margin-bottom: 20upx;
		}

	}
</style>
